<template>
    <div id="layer">
     <ul class="bnts-ci">
       <li class="title-first">
         <img :src="imgLogo" />
       </li>
       <li v-for="(val,index) in citys" @click="slected(index)">
         <span>{{val.name}}</span>
         <span>{{val.encity}}</span>
       </li>
     </ul>
    </div>
</template>
<style>
  #layer{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.4);
    z-index: 4;
  }
  ul.bnts-ci{
    width:30%;
    list-style: none;
    background:#fff;
    height:100%;
  }
  ul.bnts-ci li{
    padding:0.2rem 0 0.2rem 0.28rem;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
  }
  ul.bnts-ci li span:first-child{
    color:#333;
    font-size:0.26rem;
  }
  ul.bnts-ci li span:last-child{
    color:#999;
    font-size:0.18rem;
  }
  ul.bnts-ci li:nth-child(2){
     border-left:2px solid #e8342f;

  }
  ul.bnts-ci li:nth-child(3){
    border-left:2px solid #f08336;

  }
  ul.bnts-ci li:nth-child(4){
    border-left:2px solid #2a71b9;

  }
  ul.bnts-ci li:nth-child(5){
    border-left:2px solid #38b25d;

  }
  .title-first{
    height:0.9rem;
    padding:0rem !important;
    text-align: center;
    line-height: 0.9rem;
    justify-content: center;
  }
  .title-first img{
    width:35%;
    margin-left: 0.28rem;
  }
</style>
<script>

    export default{
        data(){
            return {
              imgLogo:'../../static/zhengWu/position_logo.png',
              citys:[
                {name:'武汉',encity:'Wuhan'},
                {name:'长沙',encity:'ChangSha'},
                {name:'合肥',encity:'Hefei'},
                {name:'南昌',encity:'NanChang'}
              ]
            }
        },
         methods:{
           slected(index){
             //alert(index);
             index++
             //alert(index)
             this.$emit('hide',false,index)
           }
         },
        components: {

        }
    }

</script>
